@font-face {
    font-family: 'Nippo-Regular';
    src: url(/assets/fonts/Nippo-Regular.woff2) format('woff2');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

* {
    font-family: 'Inter';
}

@import "app/layout/styles/layout/layout.scss";
@import "app/layout/styles/theme/themes/vela/bitaxe/theme.scss";

@import "app/layout/styles/modules/primeicons.css";
@import "app/layout/styles/modules/customicons.css";
@import "../node_modules/primeng/resources/primeng.min.css";

@import "../node_modules/primeflex/primeflex.min.css";


/* You can add global styles to this file, and also import other style files */
p-chart > div {
    position: relative;
    min-height: 40vh;
}

.card {
    &.chart {
        padding: 10px;
    }
}

/* PrimeNG Component Theme Overrides */
.p-slider {
    .p-slider-range {
        background: var(--slider-range-bg);
    }

    .p-slider-handle {
        background: var(--slider-handle-bg);
        border: 2px solid var(--slider-handle-bg);
    }
}

.p-checkbox {
    .p-checkbox-box {
        &.p-highlight {
            border-color: var(--checkbox-border);
            background: var(--checkbox-bg);

            &:hover {
                background: var(--checkbox-hover-bg);
                border-color: var(--checkbox-hover-bg);
            }
        }
    }
}

.p-button {
    background: var(--button-bg);
    border: 1px solid var(--button-bg);

    &:enabled:hover {
        background: var(--button-hover-bg);
        border-color: var(--button-hover-bg);
    }
}

.p-button.p-button-danger {
      background: $dangerButtonBg;
      border: 1px solid $dangerButtonBg;

      &:enabled:hover {
          background: $dangerButtonHoverBg;
          border-color: $dangerButtonHoverBg;
      }
  }

.p-button.p-button-secondary {
      background: $secondaryButtonBg;
      border: 1px solid $secondaryButtonBg;

      &:enabled:hover {
          background: $secondaryButtonHoverBg;
          border-color: $secondaryButtonHoverBg;
      }
  }

.p-button-inverted {
    color: var(--button-inverted-text-color);
    background: var(--button-inverted-bg);
    border: 1px solid var(--button-inverted-bg);

    &:enabled:hover {
        color: var(--button-inverted-text-color);
        background: var(--button-inverted-hover-bg);
        border-color: var(--button-inverted-hover-bg);
    }
}

.p-button-label {
    font-size: 1rem;
}

.p-button-icon {
    display: flex;
    gap: 0.5rem;
}

.p-button-mobile-only {
    display: none;

    @media (max-width: 992px) {
        display: flex;
    }
}

.p-button-full-width {
    width: 100%;
}

.p-button.p-button-text.color-dot {
    &:enabled:hover {
        background: var(--button-bg);
    }

    &:focus {
        box-shadow: none;
    }

    &:enabled:focus {
        box-shadow: none;
    }
}

// Remove focus ring from theme color buttons
button.color-dot {
    &:focus {
        outline: none !important;
        box-shadow: none !important;
    }
}

.p-togglebutton {
    &.p-highlight {
        background: var(--togglebutton-bg);
        border-color: var(--togglebutton-bg);

        &:hover {
            background: var(--togglebutton-hover-bg);
            border-color: var(--togglebutton-hover-bg);
        }
    }
}

.p-inputtext {
    background: transparent !important;
    transition: none !important;
    box-shadow: none !important;
    outline: none !important;

    &:enabled:hover,
    &:enabled:focus {
        border-color: var(--togglebutton-hover-bg) !important;
    }
}

/* Progress Bar Theme Override */
.p-progressbar {
    background: var(--progressbar-bg);

    .p-progressbar-value {
        background: var(--progressbar-value-bg);
    }

    &--thin {
        height: 6px !important;
    }
}

/* Dropdown Theme*/
.p-dropdown {
    background: transparent !important;
    transition: none !important;
    box-shadow: none !important;
    outline: none !important;

    &:hover,
    &:focus,
    &.p-dropdown-open {
        border-color: var(--togglebutton-hover-bg) !important;
    }

    .p-dropdown-panel {
        background: var(--surface-overlay) !important;

        .p-dropdown-items {
            .p-dropdown-item {
                &:hover {
                    background: var(--highlight-bg) !important;
                    color: var(--highlight-text-color) !important;
                }

                &.p-highlight {
                    background: var(--highlight-bg) !important;
                    color: var(--highlight-text-color) !important;
                }
            }
        }
    }
}

.p-button-icon {
    font-size: 1.2rem;
}